/***********************************************首页********************************************/
.foot-pane {
    -fx-background-color: -fx-foot-color;
}

/*********************************indexPane*****************************/
.h-pane {
    -fx-padding: 5px 0px 20px 0px;
}

.h-pane .button, .label {
    -fx-text-fill: -fx-base-font-color;
}

.h-pane .ikonli-font-icon {
    -fx-icon-size: -fx-base-icon-size;
    -fx-icon-color: -fx-base-color-un;
}

.data-icon-pane .ikonli-font-icon {
    -fx-icon-size: 16px;
    -fx-icon-color: -fx-base-color-un;
}

.chart-pane {
    -fx-spacing: 20px;
}

.chart-pane GridPane {
    -fx-hgap: 20px;
    -fx-vgap: 20px;
}

.chart-pane .block-pane {
    -fx-background-color: -fx-main-backgound-color; /**linear-gradient(to right,-fx-selected-color, -fx-selected-color1);**/
    -fx-effect: innershadow(three-pass-box, lightgray, 10, 0.5, 0, 0);
    -fx-padding: 10px;
}

.chart-pane .block-pane .l-pane {
    -fx-background-color: -fx-main-backgound-color; /**linear-gradient(to right,-fx-selected-color, -fx-selected-color1);**/
}

.chart-pane .data-label {
    -fx-font-color: gray;
    -fx-text-fill: gray;
    -fx-font-size: 16px;
}

.chart-pane .data-value {
    -fx-font-color: -fx-base-font-color;
    -fx-font-size: 24px;
    -fx-font-weight: 800;
}

.chart-pane .title {
    -fx-font-color: -fx-base-font-color;
    -fx-font-size: 20px;
}

/*.chart-pane .block-pane:focused {*/
/*-fx-effect: dropshadow(three-pass-box, lightgray, 20, 0.8, 0, 0);*/
/*}*/

.toggle-button {
    -fx-backgrond-color: transparent;
    -fx-fill: transparent;
    -fx-base: transparent;
    -fx-focus-color: transparent;
    -fx-text-fill: -fx-base-font-color;
    -fx-text-size: 22px;
    -fx-effect: null;
}

.toggle-button:selected {
    -fx-backgrond-color: -fx-selected-color;
    -fx-effect: null;
    -fx-base: transparent;
}

.product-table-view {

}

/************************************TablePane*****************************************/
.table-pane {
    -fx-background-color: -fx-main-backgound-color;
}

/************************************FormPane******************************************/
.form-pane .simple-form {
    -fx-background-color: white;
    -fx-spacing: -150px;
}

.form-pane .simple-form>.title-label {
    /*-fx-background-color: #cdcdcd;*/
}

.form-pane .simple-form>.control-label {
    -fx-padding: 1px 0px 0px 0px;
}
.form-pane .simple-form>.control {
    -fx-padding: 5px 0px 0px 0px;
}
.form-pane .simple-form>.control-error {
    -fx-padding: 1px 0px 0px 0px;
}

.form-pane .nav-pane {
    -fx-background-color: -fx-base-background-color;
    -fx-padding: 20px;
    -fx-alignment: center-left;
    -fx-spacing: 10px;
}

.form-pane .nav-pane .label {
    -fx-text-fill: -fx-base-font-color;
    /*-fx-font-size: 18px;*/
}

/**************************************activity page *******************************************/
.activity-pane {
    -fx-background-color: -fx-main-backgound-color;
    -fx-background-radius: 10px;
    -fx-border-color: -fx-base-border-color;
    -fx-border-width: 1px;
    -fx-border-radius: 10px;
    -fx-effect: dropshadow(three-pass-box, -fx-dropshow-color, 10, 0.5, 0, 0);
}

.activity-pane .top-pane {
    -fx-alignment: CENTER_LEFT;
    -fx-background-color: -fx-main-backgound-color;
    -fx-background-radius: 10px 10px 0px 0px;
    -fx-border-radius: 10px 10px 0px 0px;
    -fx-border-color: -fx-base-color-un;
    -fx-border-width: 0px 0px 1px 0px;
    -fx-padding: 10px 5px 10px 20px;
}

.activity-pane .top-pane .label, .activity-pane .top-pane .button {
    -fx-font-size: 18px;
    -fx-text-fill: -fx-base-font-color;
}

.activity-pane .list-node {
    -fx-border-width: 0px 0px 1px 0px;
    -fx-background-color: -fx-main-backgound-color;
    -fx-border-color: derive(-fx-base-color-un, 5%);
    -fx-border-insets: 2px 5px 5px 5px;
    -fx-padding: 5px 5px 5px 20px;
    -fx-vgap: 5px;
    -fx-hgap: 5px;
}

.activity-pane .list-node:hover {
    -fx-effect: dropshadow(three-pass-box, -fx-dropshow-color, 10, 0.5, 0, 0);
    -fx-background-color: derive(-fx-main-backgound-color, 40%);
    -fx-border-color: transparent;
}

.activity-pane .list-node .title-label {
    -fx-font-size: 18px;
    -fx-background-color: transparent;
}

.activity-pane .list-node .subtitle-label {
    -fx-font-size: 14px;
    -fx-background-color: transparent;
}

/*************************************** customer detail ********************************/
.l-pane {
    -fx-background-color: -fx-main-backgound-color;
    -fx-background-radius: 10px;
    -fx-border-color: -fx-base-color-un;
    -fx-border-width: 1px;
    -fx-border-radius: 10px;
    -fx-effect: dropshadow(three-pass-box, -fx-dropshow-color, 10, 0.5, 0, 0);
    -fx-padding: 10px;
}

.l-pane .top-pane {
    -fx-alignment: CENTER_LEFT;
    /*-fx-background-color: -fx-main-backgound-color;*/
    -fx-background-radius: 10px 10px 0px 0px;
    -fx-border-radius: 10px 10px 0px 0px;
    -fx-border-color: derive(-fx-base-color-un, 10%);
    -fx-border-width: 0px 0px 1px 0px;
    -fx-padding: 5px;
}

.l-pane .top-pane .top-right-pane, .l-pane .top-pane .top-left-pane {
    -fx-spacing: 20px;
}

.l-pane .top-pane .title, .l-pane .top-pane .button {
    -fx-font-size: 18px;
    -fx-text-fill: -fx-base-font-color;
}

.l-pane .top-pane .text-field {
    -fx-background-color: -fx-base-color-un;
    -fx-border-radius: 20px;
    -fx-background-radius: 20px;
    -fx-text-fill: -fx-base-font-color-un;
    -fx-padding: 8px;
}
.l-pane .top-pane .text-field, .l-pane .top-pane .choice-box {
    -fx-background-color: -fx-base-color-un;
    -fx-border-radius: 20px;
    -fx-background-radius: 20px;
}

.l-pane .content-pane {
    -fx-padding: 10px;
}

.l-pane .label, .l-pane .content-pane .button, .l-pane .text-field,
.l-pane .ikonli-font-icon, .l-pane .content-pane Text, .l-pane Text, .l-pane .hyperlink {
    -fx-text-fill: -fx-base-font-color;
    -fx-fill: -fx-base-font-color;
    -fx-icon-color: -fx-base-font-color;
}

.l-pane .bottom-pane {
    -fx-alignment: CENTER_LEFT;
    /*-fx-background-color: -fx-main-backgound-color;*/
    -fx-background-radius: 0px 0px 10px 10px;
    -fx-border-radius: 0px 0px 10px 10px;
    -fx-border-color: derive(-fx-base-color-un, 10%);
    -fx-border-width: 1px 0px 0px 0px;
    -fx-padding: 5px;
}
.l-pane .bottom-pane .label, .l-pane .bottom-pane .button {
    -fx-font-size: 18px;
    -fx-text-fill: -fx-base-font-color;
}

.customer-detail {
    -fx-spacing: 20px;
}

.customer-detail .text-field {
    -fx-background-color: transparent;
}

/************************************** people ***********************************/
.people-pane .follow-pane {
    -fx-padding: 20px;
}

.people-pane .follow-pane .item {
    -fx-padding: 10px;
    -fx-alignment: center;
    -fx-border-color:transparent;
    -fx-border-width: 1px;
}

.people-pane .follow-pane .item:hover {
    -fx-border-color:-fx-base-border-color;
    -fx-border-width: 1px;
    -fx-border-radius: 10px;
    -fx-background-radius: 10px;
    -fx-background-color: derive(-fx-main-backgound-color, 60%);
    -fx-effect: dropshadow(three-pass-box, -fx-dropshow-color, 10, 0.5, 0, 0);;
}

.people-pane .follow-pane .item:hover .label {
    -fx-text-fill:-fx-base-font-color-un;
}

/*************************************chart******************************************/
.chart-monitor-pane .title-pane {
    -fx-padding: 5px 5px 5px 20px;
    -fx-font-size: 20px;
    -fx-background-color: derive(-fx-main-backgound-color, 30%);
    -fx-background-radius: 5px;
    -fx-border-radius: 5px;
}

.chart-monitor-pane .title-pane .title {
    -fx-font-size: 20px;
}

.chart-monitor-pane .sub-title-pane {
    -fx-padding: 5px 5px 5px 20px;
    -fx-background-color: derive(-fx-main-backgound-color, 30%);
    -fx-background-radius: 5px 5px 0px 0px;
    -fx-border-radius: 5px 5px 0px 0px;
}

.chart-monitor-pane .sub-title-pane .sub-title {
    -fx-font-size: 18px;
}

.chart-monitor-pane PieChart {
    -fx-background-color: derive(-fx-main-backgound-color, 50%);
}

.chart-monitor-pane .chart-content-pane {
    -fx-background-color: -fx-main-backgound-color;
    -fx-background-radius: 5px;
    -fx-border-radius: 5px;
}

.chart-monitor-pane .earth-pane SVGPath {
    -fx-stroke: -fx-base-font-color;
    -fx-fill: derive(-fx-main-backgound-color, 50%);
}

.chart-monitor-pane .earth-pane SVGPath:hover {
    -fx-fill: -fx-selected-tip-color;
}

.chart-monitor-pane .chart-center-pane {
    -fx-padding: 5px 10px 5px 10px;
}

.chart-monitor-pane .chart-center-pane .title {
    -fx-text-fill: -fx-base-font-color;
}

.chart-monitor-pane .default-color0.chart-series-line {
    -fx-stroke: #bceec5
}

.chart-monitor-pane .default-color1.chart-series-line {
    -fx-stroke: #5062af
}

.chart-monitor-pane .chart-line-symbol.default-color0{
    -fx-background-color: lightgray,white;
}

.chart-monitor-pane .default-color0.chart-bar {
    -fx-bar-fill: lightblue;
}
.chart-monitor-pane .default-color1.chart-bar {
    -fx-bar-fill: lightgreen;
}

.chart-monitor-pane .default-color0.chart-pie { -fx-pie-color: #bceec5; }
.chart-monitor-pane .default-color1.chart-pie { -fx-pie-color: #97af8a; }
.chart-monitor-pane .default-color2.chart-pie { -fx-pie-color: #860061; }
.chart-monitor-pane .default-color3.chart-pie { -fx-pie-color: #adff2f; }
.chart-monitor-pane .default-color4.chart-pie { -fx-pie-color: #a2a2a2; }

.chart-monitor-pane .chart-pie-label {
    -fx-fill: white;
}


/********************************* product list ******************************/
.product-pane .block-pane {
    -fx-background-color: -fx-main-backgound-color; /**linear-gradient(to right,-fx-selected-color, -fx-selected-color1);**/
    -fx-effect: innershadow(three-pass-box, lightgray, 10, 0.5, 0, 0);
    -fx-padding: 10px;
}

.product-pane .search-pane .ikonli-font-icon {
    -fx-icon-color: -fx-base-icon-color;
}

.product-pane .search-pane .ikonli-font-icon:hover {
    -fx-icon-color: derive(-fx-base-icon-color, 30%);
}

.product-pane .search-pane {
    -fx-padding: 10px;
}

.product-pane .search-pane .text-field, .product-pane .search-pane .choice-box {
    -fx-background-color: derive(-fx-main-backgound-color, 50%);
    -fx-text-fill: -fx-base-font-color;
}

.product-pane .search-pane .choice-box .context-menu {
    -fx-background-color: -fx-main-backgound-color;
    -fx-text-fill: -fx-base-font-color;
}

.product-item-pane .new-product {
    -fx-background-color: -fx-base-font-color2;
    -fx-font-size: 10px;
    -fx-text-fill: -fx-base-font-color;
    -fx-padding: 5px;
}

.product-item-pane {
    /*-fx-background-color: -fx-main-backgound-color;*/
    -fx-padding:5px;
    -fx-border-width: 0px 0px 2px 0px;
    -fx-border-color: transparent;
}

.product-item-pane:hover {
    /*-fx-background-color: derive(-fx-main-backgound-color, 30%);*/
    -fx-border-color: -fx-base-border-color;
}

.product-item-pane .star-active {
    -fx-icon-size: 18px;
    -fx-icon-color: red;
}

.product-item-pane .star-default {
    -fx-icon-size: 18px;
    -fx-icon-color: lightgray;
}

.product-item-pane .product-info-pane {
    -fx-padding: 20px 0px 0px 20px;
}

.product-item-pane .product-info-pane .label {
    -fx-font-size: 14px;
}

.product-item-pane .product-info-pane .ikonli-font-icon {
    -fx-icon-color: derive(-fx-base-icon-color, 30%);
}

.product-item-pane .text-area {
    -fx-text-fill: -fx-base-icon-color;
    -fx-fill: -fx-base-icon-color;
    -fx-font-family: Consolas;
    -fx-font-size: 18px;
}

.product-item-pane Text {
    -fx-fill: -fx-base-icon-color;
    -fx-padding: 5px 0px 5px 20px;
}

.product-item-pane .text-area:focused {
    -fx-background-color: transparent;
}

.product-item-pane .text-area .scroll-bar:vertical, .product-item-pane .text-area .scroll-bar:horizontal {
    -fx-opacity: 0;
}

.product-item-pane .product-buy-pane {
    -fx-padding: 10px;
}

.product-item-pane .product-buy-pane .text-field {
    -fx-font-size: 16px;
}
